<script lang='ts' setup>
import { reactive, ref, Ref } from 'vue';
import OrgJobSchedulerApi from '/@/api/org/bean/job-scheduler'
const OrgJobSchedulerFormRef = ref()
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
    (e: 'update-success', data: any, res: any): void//更新成功回调
}>()

const props = defineProps({
    /**主键值 */
    uuid: String,
})

const OrgJobSchedulerFormData: Ref<any> = ref({
    uuid: props.uuid,
})

/** 自定义 任务计划 cron 校验规则 */
const validateTaskPlan = (rule: any, value: String, callback: Function) => {
    if (value == null) {
        callback(new Error("请输入 任务计划"))
    }else {
        OrgJobSchedulerApi.getCronNextTime(OrgJobSchedulerFormData.value.taskplan, 5).then((res) => {
            let str = ''
            res.data.forEach((element: string) => {
                str += element + '\n'
            });
            OrgJobSchedulerFormState.cronTimeStr = str;
            callback()
        }).catch(() => {
            callback(new Error("请检查 任务计划 cron表达式是否正确"))
        })
    }
}

const OrgJobSchedulerFormState = reactive({
    primaryKey: 'uuid',
    cronTimeStr: '',

    rules: {
        crontaskname: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        classname: [{ required: true, message: '请输入类', trigger: 'blur' }],
        taskplan: [{ validator: validateTaskPlan, trigger: 'blur' }],
    },

    /** 新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
})

defineExpose({
    save: () => OrgJobSchedulerFormRef.value.save()
})

</script>
<template>
    <jxtech-model-form
        ref="OrgJobSchedulerFormRef"
        :service-api="OrgJobSchedulerApi"
        :primary-key="OrgJobSchedulerFormState.primaryKey"
        :form-data="OrgJobSchedulerFormData"
        :rules="OrgJobSchedulerFormState.rules"
        labelWidth="130px"
        @add-success="OrgJobSchedulerFormState.onAddSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="任务名称" prop="crontaskname">
                            <el-input
                                placeholder="请输入任务名称"
                                v-model="OrgJobSchedulerFormData.crontaskname"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="类" prop="classname">
                            <el-input
                                placeholder="请输入类"
                                v-model="OrgJobSchedulerFormData.classname"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="任务计划" prop="taskplan">
                            <el-input
                                placeholder="请输入任务计划，例如：0 0 18 L * ?"
                                v-model="OrgJobSchedulerFormData.taskplan"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否激活" prop="structId">
                            <el-switch
                                v-model="OrgJobSchedulerFormData.active"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="是"
                                inactive-text="否"
                            />
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <jxtech-model-form-item label="任务起始时间" prop="startTime">
                            <el-date-picker
                                style="width: 100%;"
                                placeholder="请选择任务起始时间"
                                v-model="OrgJobSchedulerFormData.startTime"
                                type="datetime"
                            ></el-date-picker>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="任务结束时间" prop="endTime">
                            <el-date-picker
                                style="width: 100%;"
                                placeholder="请选择任务结束时间"
                                v-model="OrgJobSchedulerFormData.endTime"
                                type="datetime"
                            ></el-date-picker>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="描述" prop="description">
                            <el-input
                                placeholder="请输入描述"
                                v-model="OrgJobSchedulerFormData.description"
                                type="textarea"
                                show-word-limit
                                maxlength="100"
                                :rows="3"
                            />
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="jobmap参数" prop="jobDataMap">
                            <el-input
                                placeholder="请输入json字符串"
                                v-model="OrgJobSchedulerFormData.jobDataMap"
                                type="textarea"
                                :rows="3"
                            />
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="最近5次执行时间">
                            <el-input
                                v-model="OrgJobSchedulerFormState.cronTimeStr"
                                type="textarea"
                                :rows="6"
                                disabled
                            />
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>